<template>
  <el-menu
    class="side-bar"
    mode="vertical"
    :default-active="activeItem"
    background-color="rgb(251,251,251)"
    text-color="#8f98a7"
    active-text-color="#287cbb"
    unique-opened
    router
    @select="selectItem"
  >
    <template v-for="tag in tags" :key="tag.index">
      <el-menu-item :index="tag.index">
        <template #title class="text">
          <i :class="tag.icon"></i>
          {{ tag.title }}
        </template>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
  name: 'AdminNav',
  setup() {
    // 导航栏内容
    const tags = [
      {
        icon: 'el-icon-user-solid',
        index: 'dashboard',
        title: '管理主页',
      },
      {
        icon: 'el-icon-user-solid',
        index: 'user',
        title: '用户管理',
      },
      {
        icon: 'el-icon-user',
        index: 'order',
        title: '订单管理',
      },
      {
        icon: 'el-icon-user',
        index: 'flight',
        title: '航班管理',
      },
    ];
    // 响应式切换导航栏
    const store = useStore();
    const selectItem = (index: string) => {
      store.commit('changeActiveAdminNav', index);
    };
    const activeItem = ref('');
    activeItem.value = store.state.activeAdminNavItem;
    watch(
      () => store.state.activeAdminNavItem,
      () => (activeItem.value = store.state.activeAdminNavItem)
    );
    return {
      tags,
      selectItem,
      activeItem,
    };
  },
});
</script>

<style lang="scss" scoped>
.side-bar {
  height: 100%;
  // padding: 0 20px;
  border-bottom: 0 !important;
  width: 250px;
}
:deep(.el-menu-item) {
  width: 250px;
  margin: 0 auto;
  text-align: center;
}
</style>
